<template>
  <div class="container">
    <div class="header"></div>
    <div class="title">
      <h4>小米账号登录</h4>
    </div>
    <div class="log">
      <span><img src="https://static.account.xiaomi.com/uiTheme/images/miotstore/logo.svg" alt=""></span>
      <p>欢迎登录小米有品</p>
    </div>
    <div class="content">
      <form action="">
        <input type="text" placeholder="邮箱/ 手机号码/小米ID" v-model="model.name">
        <input type="text" placeholder="请输入密码" v-model="model.pwd">
        <div>
          <el-checkbox v-model="checked"></el-checkbox>
          <span>已阅读并同意小米账号用户协议和隐私政策</span>
        </div>
        <button :class="{ active: !checked }" type="button" @click="logon" :disabled="!checked">登录</button>
      </form>
    </div>

  </div>

</template>

<script>
import request from '../../utils/request.js'
export default {
  name: 'Login',
  data() {
    return {
      model: {
        name: "",
        pwd: ""
      },
      checked: false
    }
  },
  methods: {
    logon() {
      request({
        url: "/user/login_pwd",
        method: "post",
        data: this.model
      })
        .then(token => {

          sessionStorage.setItem('token', token);
          sessionStorage.setItem("use", JSON.stringify(this.model))
          this.$router.replace(this.$route.query.target || "/profile")
        })
        .catch(() => { });
    },
    hidden() {
      if (!checked) {
        this.data.active = true
      } else {
        this.active = false
      }
    }
  }
}
</script>


<style scoped>
.container {
  width: 100vw;
  height: 100vh;
}

.header {
  height: 40px
}

.title {
  display: flex;
  justify-content: center;
  padding-bottom: 20px;
}

.title h4 {
  color: rgba(0, 0, 0, 1);
  font-size: 20px;
  font-weight: 600;
}

.log {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 0 48px 0;
  background: url("./background.d3d7d2dd.png") center no-repeat
}

.log span {
  width: 48px;
  height: 48px;
}

.log img {
  width: 100%;
}

.log p {
  margin-top: 16px;
}

.content {
  display: flex;
  flex-direction: column;
  padding: 0 30px;
}

form {
  display: flex;
  flex-direction: column;
}

form div {
  display: flex;
  margin-top: 20px;
  align-items: center;
  justify-content: space-around;
}

form div>span {
  color: rgba(0, 0, 0, 0.6);
  font-size: 14px;
  font-weight: normal;

}

form>input {
  height: 50px;
  background: rgba(240, 240, 240, 1);
  border: 0;
  margin-top: 12px;
  padding: 0 14px;
  box-sizing: border-box
}

.content button {
  height: 36px;
  border-radius: 36px;
  margin-top: 20px;
  background-color: #0B84FF;
  border: 1px solid #0B84FF;
}

.active {
  background-color: #0aeeff !important;
  border: 1px solid #0aeeff;
}
</style>
